<template>
  <!-- 联系我们 -->
  <div id="contactUs">
    <div class="titleBox">
      <p class="line"></p>
      <p class="titleName">公司地址</p>
    </div>
    <div class="cityBox">
      <p
        v-for="(item,index) in citiList"
        :key="index"
        :class="{'active':active==index}"
        @click="chooseCity(item,index)"
      >{{item.name}}</p>
    </div>
    <div class="address">
      <div class="addrDetails">
        <img src="./NumImg/position.png" alt />
        <span v-if="addrList.name=='北京'">地址（总部）：</span>
        <span v-else>地址：</span>
        <span>{{addrList.position}}</span>
      </div>
      <div class="addrDetails">
        <img src="./NumImg/tel.png" alt />
        <span>电话：</span>
        <span>{{addrList.phone}}</span>
      </div>
    </div>
    <!-- 地图 -->
    <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"></baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      citiList: [
        {
          name: '北京(总部)',
          position: '北京市朝阳区高碑店乡半壁店村惠河南街1129号2号楼2层2003室',
          personNme: '王女士',
          phone: '010-57201618/13466361293'
        },
        {
          name: '上海',
          position: '上海市徐汇区中山西路2020号华宜大厦2号楼1603室',
          personNme: '何佳',
          phone: '021-61733729'
        },
        {
          name: '深圳',
          position: '深圳福田区上梅林卓越城B座1008A',
          personNme: '陈女士',
          phone: '17666107914'
        },
        {
          name: '重庆',
          position: '重庆市九龙坡区华润万象城华润大厦21-5',
          personNme: '陈女士',
          phone: '023-68628133'
        }
      ],
      active: 0,
      addrList: {
        name: '北京',
        position: '北京市朝阳区高碑店乡半壁店村惠河南街1129号2号楼2层2003室',
        personNme: '王女士',
        phone: '010-57201618/13466361293'
      },
      center: {
        lng: 0,
        lat: 0
      }, //经纬度
      zoom: 15,
      BMap: null,
      map: null,
      currentCenter: {}
    };
  },
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.center.lng = 116.521268;
      this.center.lat = 39.910674;
      this.zoom = 15;
      this.showMap();
    },
    chooseCity(item, index) {
      this.active = index;
      this.addrList = item;
      this.showMap();
    },
    // 地址解析经纬度
    showMap() {
      const _this = this;
      const { map, BMap } = this;
      this.$nextTick(() => {
        // 创建地址解析器实例
        const myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(
          _this.addrList.position,
          function (point) {
            if (point) {
              map.clearOverlays();
              map.centerAndZoom(point, _this.zoom);
              const mk = new BMap.Marker(point);
              map.addOverlay(mk);
              map.panTo(point);
              _this.$emit('get-point', point);
              _this.point = point;
              // console.log('解析后坐标', _this.point);
            }
          },
          _this.addrList.name
        );
        /*console.log(_this.address)
        console.log(_this.city)*/
        /*console.log(_this.center)*/
      });
    }
  }
};
</script>

<style lang="less" scoped>
#contactUs {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 40px;
  // overflow: hidden;
  .titleBox {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 51px;
    margin-left: -10px;
    .line {
      width: 2px;
      height: 17px;
      background-color: #fd7f2c;
      margin-right: 8px;
    }
    .titleName {
      font-size: 16px;
      font-weight: 600;
      color: #222222;
      margin-right: 22px;
    }
    .wage {
      font-size: 16px;
      font-weight: 600;
      color: #fd7f2c;
    }
  }
  .cityBox {
    width: 100%;
    overflow: hidden;
    margin-top: 22px;
    p:first-of-type {
      width: 118px;
    }
    p {
      width: 66px;
      height: 34px;
      border-radius: 4px;
      border: solid 1px #d6d6d6;
      font-size: 16px;
      color: #555;
      text-align: center;
      line-height: 34px;
      float: left;
      margin-right: 35px;
      cursor: pointer;
    }
    .active {
      background-color: #fd7f2c;
      color: #fff;
    }
  }
  .address {
    width: 100%;
    margin-top: 40px;
    color: #555;
    .addrTitle {
      font-size: 16px;
      font-weight: 600;
      margin-top: 22px;
    }
    .addrDetails {
      margin-top: 18px;
      display: flex;
      justify-content: start;
      align-items: center;
      img {
        width: 12px;
        height: 14px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  #allmap {
    width: 100%;
    height: 360px;
    margin-top: 35px;
  }
}
</style>